<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="$t('违规记录')"
      width="902"
      @close="closeViolationRecord"
    >
      <div class="list">
        <el-scrollbar>
          <div v-for="(item, index) in list" class="item" :key="index">
            <div class="left">
              <el-tooltip
                class="box-item"
                effect="light"
                :content="item.aiDisposal"
                placement="top"
              >
                <span>{{ index + 1 }}、{{ item.aiDisposal }}</span>
              </el-tooltip>
            </div>
            <div class="right">
              <div class="pic">
                <img :src="item.eventImg" alt="" />
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeViolationRecord">{{$t('取消')}}</el-button>
          <el-button
            type="primary"
            @click="closeViolationRecord"
            class="confirm"
          >
            {{$t('确认')}}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getEventPage } from '@/api/index';
export default {
  props: {
    id: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      dialogVisible: true,
      list: [],
    };
  },
  methods: {
    closeViolationRecord() {
      this.$emit('closeViolationRecord');
    },
  },
  async mounted() {
    const { data } = await getEventPage({
      count: 999,
      personId: this.id
    });
    if (data.code === 0) {
        this.list = data.data.records;
    }
  },
};
</script>

<style lang="scss" scoped>
.list {
  height: 384px;

  .item {
    @include clear;
    padding-bottom: 30px;
    &:first-of-type {
      padding-top: 20px;
    }

    .left {
      float: left;
      width: 682px;

      span {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
      }
    }

    .right {
      float: right;
      padding-right: 30px;

      .pic {
        width: 88px;
        height: 53px;
        background: #2a2a2a;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 8px 8px 8px 8px;
        }
      }
    }
  }
}
</style>
